<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>jqMobi Kitchen Sink</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>无标题文档</title>
<link rel="stylesheet"  type="text/css" href="../kitchensink/ui.synergy.css" title="synergy"/>
<link rel="stylesheet"  type="text/css" href="../kitchensink/icons.synergy.css" title="synergy"/>
</head>
<style>
* {
	-webkit-user-select:none; /* Prevent copy paste for all elements except text fields */
	-webkit-tap-highlight-color:rgba(255, 255, 255, 0); /* set highlight color for user interaction */
	margin:0;
	padding:0;/* Remove default padding and margins for all elements */
	-webkit-box-sizing:border-box; box-sizing:border-box;/*padding和border被包含在定义的width和height)
此属性表现为怪异模式下的盒模型。*/
} 

input,textarea { -webkit-user-select:text; } /* allow users to select text that appears in input fields */

img { border:none; } /* Remove default borders for images */
a{ 
	text-decoration:none;
}

*:focus {outline: none;border:0;-webkit-border:0;}
body{background:#ccc;}
p.set{
	background:url(../kitchensink/images/m/tool_set.png) center center;
	width:32px;
	height:32px;
	-webkit-background-size:32px 32px;
	}
button{border:0;}
button.btn_query{background:url(m_btn_search.png) no-repeat;width:30px;height:26px;background-size:30px 26px;}
.test_ui_form{
	background:#FFF;
	height:25px;
	border:#CCC solid 1px;
	}
.test_ui_form:hover{
	background:#000;
	}
.test_ui_form:active{
	background:#F00;
	}
.test_ui_form:focus{
	border:#000 solid 3px;
	background:#00FFFF;
	}
.test_ui_form:selected{background:#00F;}
input.test_ui_form[type='text']{
	appearance:none;
	}
input.test_ui_form[type='button']{
	width:120px;height:30px;
}
@media screen and (-webkit-device-pixel-ratio: 1.5),
only screen and (min-width: 480px){
	body{background:yellow;}
	p.set{
	background:url(../kitchensink/images/h/tool_set.png) center center;
	width:32px;
	height:32px;
	-webkit-background-size:36px 36px;
	}
button.btn_query{background:url(h_btn_search.png) no-repeat;}
	}
@media screen and (-webkit-device-pixel-ratio: 2.0),
only screen and (min-width: 640px){
	body{background:green;}
	p.set{
	background:url(../kitchensink/images/retina/tool_set.svg) no-repeat;
	-webkit-background-size:26px 26px;
	}
	button.btn_query{background:url(vbtn_query.png) no-repeat;}
	}
	</style>
     
<body>
<div>
<p>1.5:blue;</p>
<p>2.0:red;</p>
<p>480:yellow;</p>
<p>640:green;</p>
<p class="set"></p>
<p class="set"></p>
<p><input type="text"></input></p>
<p><input type="textarea"></input></p>
<p><input type="button">Input</input></p>
<p></p>
 <p><button class="btn_query"> </button></p>
 
 	<header class="headerbar" >
            <a href="javascript:$.ui.goBack();"><div class="icon_back"></div></a>
            <div class="item flex"><h1></h1></div>
            <a href="#"><div class=" icon_set"></div></a>
    </header>
    <div>
     <h4>一些CSS伪类行为在手机中的表现</h4>
     <div>
       <input type="text" class="test_ui_form"  value="我是input[type='text']"/>input[type='text']
       <input type="button" class="test_ui_form" value="我是input[type='button'"/>input[type='button']
       <button class="test_ui_form">button</button>
       <a class="test_ui_form">测试a标签的行为</a>
       <p class="test_ui_form">w我是P，代表任意元素</p>
     </div>
     <footer>只有E:hover在手机中的表现是准确的</footer>
    </div>
</div>
</body>
</html>
